<template>
  <div class="page">
    <!-- bg -->
    <div class="b1">
      <div style="flex: 1;background-color: #74EB41;">
      </div>
      <div style="flex: 2;background-color: #FFFFFF;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;padding-bottom: 12px;">
      </div>
    </div>

    <!-- contient -->
    <div class="b2">
      <!-- content -->
      <div class="body">
        <div style="color: #FFFFFF;font-size: 30px;font-weight: bold;margin: 20px;margin-top: 64px;">Let's Start
          with Login</div>
        <div class="panel">
          <van-field
            type="text"
            label=""
            placeholder="Email"
            style="border:1px solid #EBEBEB"
            v-model="email"
          />
          <van-field
            type="password"
            label=""
            placeholder="Password"
            v-model="password"
            style="border:1px solid #EBEBEB;margin-top:12px;"
          />
          <div style="display:flex;flex-direction: column;">
            <van-button
              style=" height: 44px;background-color: #74eb41; margin-top: 12px; color: #FFFFFF; border: none; box-shadow: 0 0 10px #74eb41; "
              @click="loginHanlde()"
            >Login</van-button>
            <van-button
              style="height: 44px;background-color: #126ebe;margin-top: 20px;color: #FFFFFF;border: none;"
              @click="loginHanlde()"
            >FaceBook</van-button>
          </div>
          <div style=" margin-top: 20px;color: #126ebe;text-align: center;font-size: 14px;">Skip
          </div>
        </div>
      </div>

      <!-- bottom -->
      <div style="margin-bottom: 12px;">
        <div style="display: flex;flex-direction: column;align-items: center;">
          <div style="margin-top: 12px;color: #126ebe;">Forget Password</div>
          <div
            style="margin-top: 12px;color: #126ebe;"
            @click="registBtnClickHandle()"
          >Have No
            Accout</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      password: "",
    };
  },
  created() {
    let lang = localStorage.getItem("lang");
    if (lang != undefined) {
      this.$i18n.locale = lang;
    }
  },
  methods: {
    loginHanlde() {
      localStorage.setItem("login", "1");
      this.$router.push({
        path: "/",
      });
    },
    registBtnClickHandle() {
      this.$router.push({
        path: "/reg",
      });
    },
  },
};
</script>

<style>
input {
  background-color: white;
}
</style>

<style scope>
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: red;
}

.b1 {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
}

.b2 {
  z-index: 999;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel {
  margin: 0 12px;
  margin-bottom: 80px;
  padding: 40px 12px 40px 12px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 10px #00000020;
}

.input {
  background-color: #ffffff;
  height: 44px;
  padding-left: 12px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  color: #74eb41;
}
</style>